<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    body {
      background: #000;
    }
    
    .wrap {
      margin: 100px auto 0;
      width: 630px;
      height: 394px;
      padding: 10px 0 0 10px;
      background: #000;
      overflow: hidden;
      border: 1px solid #fff;
    }
    
    .wrap li {
      float: left;
      margin: 0 10px 10px 0;
      
    }
    
    .wrap img {
      display: block;
      border: 0;
    }
  </style>
  
</head>
<body>
<div class="wrap">
  <ul>
    <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
  </ul>
</div>
<script type="text/javascript">
	// 获取标签
	var wrap = document.querySelector(".wrap")
	var li1 = document.querySelectorAll("li")[0]
	var li2 = document.querySelectorAll("li")[1]
	var li3 = document.querySelectorAll("li")[2]
	
	// 1、鼠标进入大范围，所有的小图片都变暗（css opacity 1 0）
	wrap.onmouseenter = function(){
		li1.style.opacity = "0.4"
		li2.style.opacity = "0.4"
		li3.style.opacity = "0.4"
	}
	wrap.onmouseleave = function(){
		li1.style.opacity = "1"
		li2.style.opacity = "1"
		li3.style.opacity = "1"
	}
	
	// 2、鼠标进入某个小图片，自己变亮，其他的兄弟变暗
	li1.onmouseenter = function(){
		this.style.opacity = "1"
		li2.style.opacity = "0.4"
		li3.style.opacity = "0.4"
	}
	li2.onmouseenter = function(){
		this.style.opacity = "1"
		li1.style.opacity = "0.4"
		li3.style.opacity = "0.4"
	}
	li3.onmouseenter = function(){
		this.style.opacity = "1"
		li1.style.opacity = "0.4"
		li2.style.opacity = "0.4"
	}
</script>
</body>
</html>